<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <!-- css -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="css/flexslider.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <!--4.引入jquery框架-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--5.引入boostrap框架的JS-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--7.引入angularJS框架-->
    <script src="angularjs/angular.min.js"></script>
    <!--6.引入Layer框架的JS-->
    <script src="layer/layer.js"></script>
    <script>
        <!---->
        function open() {
            $("#myModal").modal("show");
        }

        var item = sessionStorage.getItem("user");
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            //查询所有险种
            $scope.getAllSafe = function () {

                $http.get("http://localhost:6001/consumer/allrisks").success(function (data) {
                    $scope.list = data; //险种集合
                    if (item == null | item == "") {
                        $("#center").hide()
                    } else {
                        $('#login').hide()
                    }
                })
                //显示天气
                $http.get("http://localhost:6001/consumer/getWeather").success(function (data) {

                    var high = 0;
                    var low = 0;
                    var text_day = "";
                    $.each(data, function (key, values) {
                        if (key == "high") {
                            high = values;
                        }
                        if (key == "low") {
                            low = values;
                        }
                        if (key == "text_day") {
                            text_day = values;
                        }
                    });
                    if (text_day.indexOf("晴") != -1) {
                        $("#temp").html("<img src='img/晴.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    } else if (text_day.indexOf("阴") != -1 || text_day.indexOf("多云") != -1) {
                        $("#temp").html("<img src='img/阴.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    } else {
                        $("#temp").html("<img src='img/雨.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    }

                })
            }

            //查看车险详情
            $scope.ByupCity = function (safetypeid) {
                $('#myModalLabel').text('车险详情');
                $.ajax({
                    url: "http://localhost:6001/consumer/getAllTSafetypeByid",
                    data: {safetypeid: safetypeid},
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        res.data;
                        //alert(res.data.detailed);
                        $("#detailed1").html(res.data.detailed);
                    }
                });
            };

            $scope.getshopping = function () {
                location.href = "details.html";
            }
        })
    </script>

</head>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="getAllSafe()">
<div id="wrapper">
    <!-- start header -->
    <header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="logo" width="100px"
                                                                   height="50px"/></a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="pricing.html">车险</a></li>
                        <li><a href="about.html">关于我们</a></li>
                    <!--    <li><a href="contact.html">联系我们</a></li>-->
                        <li id="center"><a href="../myCenter/home.html">个人中心</a></li>
                        <li id="login"><a href="../vendor/loginByName.html">登录|注册</a></li>
                        <li id="temp"></li>
                    </ul>
                </div>
            </div>
        </div>
    </header><!-- end header -->
    <section id="inner-headline">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="pageTitle">
                        Car insurance</h2>
                </div>
            </div>
        </div>
    </section>
    <section id="content">
        <div class="container">
            <!-- end divider -->
            <div class="row">
                <div class="col-md-12">
                    <div><h2>险种展示</h2>
                    </div>
                    <br>
                </div>
            </div>
            <div class="row">
                <!--显示所有险种-->
                <div class="col-md-4" ng-repeat="s in list">
                    <div class="pricing-box-item">
                        <div class="pricing-heading">
                            <img src="img/qichenbaoxian.jpg">
                        </div>
                        <div class="pricing-terms">
                            <h6>￥{{s.price}} 起</h6>
                        </div>
                        <div class="pricing-container">
                            <ul>
                                <li><i class="icon-ok"></i> {{s.safename}}</li>
                                <li><i class="icon-ok"></i> {{s.brief}}</li>
                                <!--<li><i class="icon-ok"></i> {{s.detailed}}</li>-->
                                <li><i class="icon-ok"></i> 住院护理津贴 50/天</li>
                                <li><i class="icon-ok"></i> 意外伤害身故、残疾 6万元</li>

                            </ul>
                        </div>
                        <div class="pricing-action">
                            <button ng-click="ByupCity(s.safetypeid)" data-target="#myModal" data-toggle="modal"
                                    class="btn btn-medium">查看详情
                            </button>
                        </div>
                    </div>


                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">保险详情</h4>
                                </div>
                                <div class="modal-body">

                                    <span id="detailed1" name="detailed"></span>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <a href="offer.html" ng-click="getshopping" class="btn btn-primary">前往购买</a>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>


                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Our Contact</h5>
                        <address>
                            <strong>Financial Services company Inc</strong><br>
                            JC Main Road, Near Silnile tower<br>
                            Pin-21542 NewYork US.
                        </address>
                        <p>
                            <i class="icon-phone"></i> (123) 456-789 - 1255-12584 <br>
                            <i class="icon-envelope-alt"></i> email@domainname.com
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Quick Links</h5>
                        <ul class="link-list">
                            <li><a href="#">Latest Events</a></li>
                            <li><a href="#">Terms and conditions</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Career</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Latest posts</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Recent News</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="sub-footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="copyright">
                            <p>
                                Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
                                                                                          href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ul class="social-network">
                            <li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Google plus"><i
                                    class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>


</div>
</body>
</html>